<template>
    <div>
        <el-card style="margin: 10px 0;">
            <CategorySelect @getCategoryId="getCategoryId" :show="!isShowTable"></CategorySelect>
        </el-card>
        <el-card>
            <div v-show="isShowTable">
                <el-button type="primary" icon="el-icon-plus" style="margin: 10px 0;" :disabled="!category3Id"
                    @click="addAttr">添加属性
                </el-button>
                <!-- 表格 -->
                <el-table border style="width: 100%;" :data="attrList">
                    <el-table-column label="序号" prop="prop" width="80%" type="index" align="center">
                    </el-table-column>
                    <el-table-column label="属性名称" prop="attrName" width="150%">
                    </el-table-column>
                    <el-table-column label="属性值列表" prop="prop">
                        <template slot-scope="{row,$index}">
                            <el-tag type="success" v-for="(attrValue,index) in row.attrValueList" :key="attrValue.id"
                                style="margin:10px 10px;">
                                {{attrValue.valueName}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" prop="prop" width="150%">
                        <template slot-scope="{row,$index}">
                            <el-button type="warning" size="mini" icon="el-icon-edit" @click="updateAttr(row)">
                            </el-button>
                            <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 添加属性的结构 -->
            <div v-show="!isShowTable">
                <el-form :inline="true" ref="form" label-width="60px" :model="attrInfo">
                    <el-form-item label="属性名">
                        <el-input placeholder="请输入属性名" v-model="attrInfo.attrName"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" icon="el-icon-plus" @click="addAttrValue" :disabled="!attrInfo.attrName">添加属性值
                </el-button>
                <el-button @click="isShowTable=true">取消</el-button>
                <el-table style="width:100% ; margin: 10px 0;" border :data="attrInfo.attrValueList">
                    <el-table-column label="序号" type="index" width="60px"></el-table-column>
                    <el-table-column label="属性值名称" prop="prop">
                        <template slot-scope="{row,$index}">
                            <el-input v-model="row.valueName" placeholder="请输入属性名称" size="mini" v-if="row.flag"
                                @blur="toLook(row)" @keyup.native.enter="toLook(row)" :ref="$index">
                            </el-input>
                            <span v-else @click="toEdit(row,$index)">{{row.valueName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="{row,$index}">
                            <!-- 气泡确认框 -->
                            <el-popconfirm :title="`确定删除${row.valueName}`" @onConfirm="deleteValue($index)">
                                <el-button type="danger" icon="el-icon-delete" size='mini' slot="reference">删除
                                </el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button type="primary" @click="addOrUpdateAttr" :disabled="attrInfo.attrValueList.length<1">保存
                </el-button>
                <el-button @click="isShowTable=true">取消</el-button>
            </div>
        </el-card>
    </div>
</template>
<script>
    import cloneDeep from 'lodash/cloneDeep'
    export default {
        name: 'Attr',
        data() {
            return {
                category1Id: '',
                category2Id: '',
                category3Id: '',
                attrList: [],
                isShowTable: true,
                // 收集新增属性
                attrInfo: {
                    attrName: '',
                    attrValueList: [],
                    categoryId: 0,
                    categoryLevel: 3
                }
            }
        },
        methods: {
            // 自定义事件的回调
            getCategoryId({ categoryId, level }) {
                if (level == 1) {
                    this.category1Id = categoryId
                } else if (level == 2) {
                    this.category2Id = categoryId
                } else {
                    // 获取平台属性
                    this.category3Id = categoryId
                    this.getAttrList()
                }
            },
            async getAttrList() {
                const { category1Id, category2Id, category3Id } = this
                let res = await this.$API.attr.reqAttrList(category1Id, category2Id, category3Id)
                if (res.code == 200) {
                    this.attrList = res.data
                }
            },
            //添加属性值
            addAttrValue() {
                this.attrInfo.attrValueList.push({
                    attrId: this.attrInfo.id,
                    valueName: '',
                    flag: true
                })
                this.$nextTick(() => {
                    this.$refs[this.attrInfo.attrValueList.length - 1].focus()
                })
            },
            // 添加属性框
            addAttr() {
                this.isShowTable = false
                this.attrInfo = {
                    attrName: '',
                    attrValueList: [

                    ],
                    categoryId: this.category3Id,
                    categoryLevel: 3
                }
            },
            // 修改属性
            updateAttr(row) {
                this.isShowTable = false
                this.attrInfo = cloneDeep(row)
                this.attrInfo.attrValueList.forEach(item => {
                    this.$set(item, 'flag', false)
                });

            },
            //失去焦点
            toLook(row) {
                if (row.valueName.trim() == '') {
                    row.valueName = ''
                    this.$message('请输入正确的属性')
                    return
                }
                let isreq = this.attrInfo.attrValueList.some(item => {
                    if (row !== item) {
                        return row.valueName == item.valueName
                    }
                })
                if (isreq) {
                    return
                }
                row.flag = false

            },
            // 点击span，变为编辑模式
            toEdit(row, index) {
                row.flag = true
                this.$nextTick(() => {
                    this.$refs[index].focus();
                })
            },
            //气泡确认框按钮的回调
            deleteValue(index) {
                this.attrInfo.attrValueList.splice(index, 1)
            },
            // 保存按钮,添加或修改
            async addOrUpdateAttr() {
                this.attrInfo.attrValueList = this.attrInfo.attrValueList.filter(item => {
                    if (item.valueName != '') {
                        delete item.flag
                        return true
                    }
                })
                try {
                    await this.$API.attr.reqAddOrUpdateAttr(this.attrInfo)
                    this.isShowTable = true
                    this.$message({
                        type: 'success', message: '保存成功'
                    })
                    this.getAttrList()
                } catch (error) {
                    this.$message({
                        type: 'error',
                        message: '保存失败'
                    })
                }

            }
        },
    }
</script>
<style lang="">

</style>